<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				height: 12130px;
				background: linear-gradient(#fff, #000);
			}
			
			.rokcet {
				position: fixed;
				width: 149px;
				height: 249px;
				background: url(img/rocket_button_up.png) left top;
				top: 60%;
				right: 20px;
				display: none;
			}
			
			.rokcet:hover {
				background-position: -100% 0;
			}
			
			.rocket_run {
				animation: rocket_run .25s infinite alternate steps(4);
				-webkit-animation: rocket_run .25s infinite alternate steps(4);
			}
			
			@keyframes rocket_run {
				0% {
					background-position: -200% top;
					/*top: 50%;
					right: 20px;*/
				}
				100% {
					background-position: -600% top;
					/*top: -20%;
					right: 20px;*/
				}
			}
		</style>
		<div class="rokcet">

		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var rokcet = $(".rokcet"),
				body_top,
				rokcet_top,
				body_speed,
				rokcet_speed,
				timer,
				rokcet_all_top,
				point_num;
			//				diffent=0,//后期加速时要弥补的距离
			//				less_num=10;//前期每次要减少的量
			//				rokcet.getAttribute();   获取行内的高度  
			//				rokcet.style.height;     获取行内的高度
			//				getComputedStyle(rokcet).height;  获取对象渲染完后的高度
			//				rokcet.clientHeight;     获取对象css样式的高度（content+padding）
			//				rokcet.offsetHeight;     获取对象css样式的高度（content+padding+border）
			console.log(rokcet);

			rokcet.on("click", function() {
				body_top = $(window).scrollTop();
				rokcet_all_top = rokcet.position().top + parseInt(rokcet.height());
				rokcet_top = rokcet.position().top;
				body_speed = body_top / 50;
				rokcet_speed = rokcet_all_top / 50;
				point_num = body_top * .2;
				rokcet.addClass("rocket_run");
				timer = setInterval(function() {
					body_top -= body_speed;
					if(body_top <= point_num) {
						rokcet_speed += 60;
					} else {
						if(rokcet_speed > 5) {
							rokcet_speed -= 0.5;
						}
					}
					console.log(rokcet_top);
					rokcet_top -= rokcet_speed;
					$(window).scrollTop(body_top);
					rokcet.css("top", rokcet_top + "px");
					if(body_top <= 0) {
						clearInterval(timer);
						rokcet.removeClass("rocket_run");
						rokcet.css("top", "");
						rokcet.css("display", "none");
					}
				}, 20)
			})
			window.addEventListener("scroll", function() {
				body_top = $(window).scrollTop();
				if(body_top > 200) {
					rokcet.css("display", "block");
				} else {
					rokcet.css("display", "none");
				}
				//				rokcet.style.display = (body_top > 200 ? "block" : "none");
			})
		</script>
	</body>

</html>